import "./assets/css/App.css";
import RouteWithSubRoutes from "./routes/RouteWithSubRoutes";
import { Switch, NavLink, withRouter } from "react-router-dom";
import React, { Component } from "react";
import isShowNav from './hooks/isShowNav'
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      routes: props.routes,
      currentLocation: props.location.pathname,
      isNav: true,
      k:''
    };
  }
  
  componentWillMount() {
    this.setState({
      isNav:isShowNav(this.props.location.pathname)
    });
  }
  
  componentWillReceiveProps(nextProps) {
      this.setState({
        currentLocation: nextProps.location.pathname,
        isNav:isShowNav(nextProps.location.pathname)
      });
  }

  render() {
    return (
      <div className="App">
        {this.state.isNav && (
          <nav className="nav-bottom">
            <NavLink exact to="/">
              <img
                src={
                  require(`./assets/images/${
                    this.state.currentLocation === "/"
                      ? "home_active.png"
                      : "home.png"
                  }`).default
                }
                className="nav-icon"
                alt=""
              />
              <span className="nav-text">首页</span>
            </NavLink>
            <NavLink to="/menu">
              <img
                src={
                  require(`./assets/images/${
                    this.state.currentLocation === "/menu"
                      ? "menu_active.png"
                      : "menu.png"
                  }`).default
                }
                className="nav-icon"
                alt=""
              />
              <span className="nav-text">菜单</span>
            </NavLink>
            <NavLink to="/cart">
              <img
                src={
                  require(`./assets/images/${
                    this.state.currentLocation === "/cart"
                      ? "shopbag_active.png"
                      : "shopbag.png"
                  }`).default
                }
                className="nav-icon"
                alt=""
              />
              <span className="nav-text">购物袋</span>
            </NavLink>
            <NavLink to="/my">
              <img
                src={
                  require(`./assets/images/${
                    this.state.currentLocation === "/my"
                      ? "my_active.png"
                      : "my.png"
                  }`).default
                }
                className="nav-icon"
                alt=""
              />
              <span className="nav-text">我的</span>
            </NavLink>
          </nav>
        )}
        <Switch>
          {this.state.routes.map((route) => {
            return <RouteWithSubRoutes key={route.name} {...route} />;
          })}
        </Switch>
      </div>
    );
  }
}

export default withRouter(App);
